import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common";
import { Form, Alert, Row, Col, Spin, Tooltip, Icon, Popover } from 'antd'
import "styles/setting/workflow-config/new-workflow-config.scss"

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14, offset: 1 },
};


class NewFpConfig extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowLoading: false,
      configFp: [],
      configFunctionProfile: {},
    }
  }

  componentDidMount() {
    let { apiService } =  this.props.params;
    this.setState({ isShowLoading: true })
    apiService().then(res => {
      this.setState({ isShowLoading: false })
      if (res && res.data) {
        this.setState({ configFp: this.props.configFp, configFunctionProfile: res.data })
      }
    }).catch(res => {
      this.setState({ isShowLoading: false })
    })
  }

  renderDefaultText = (options, code) => {
    let { configFunctionProfile } = this.state;
    return <div>
      {options.map(option => {
        if (configFunctionProfile[code] === option.value) {
          return <div>{option.label}</div>
        }
      })}
    </div>
  }

  renderConfigFp = config => {
    let { configFunctionProfile } = this.state;
    return <Form className="radio-list-wrap new-form">
      {config.groupList.filter(item => !item.isHide).map(groupItem => {
        let isShowExtra =groupItem.isHasExtra && configFunctionProfile[groupItem.fpCode] === groupItem.isShowExtra;
        return <div>
          <FormItem
            className={`function-profile-list`}
            extra={groupItem.description}
            label={<span>{groupItem.fpName}:{groupItem.tooltipInfo && (
              <Popover content={(groupItem.tooltipInfo)}>
                <Icon type="info-circle-o" className='font-description' />
              </Popover>
            )}</span>}>
            <div>{groupItem.defaultLabel ? (<div>{groupItem.defaultLabel}</div>) : this.renderDefaultText(groupItem.options, groupItem.fpCode)}</div>
          </FormItem>
          {isShowExtra && groupItem.exTraCondition &&
            <FormItem
              className={`function-profile-list`}
              extra={groupItem.exTraCondition.description}
              label={<span>{groupItem.exTraCondition.fpName}:{groupItem.exTraCondition.tooltipInfo && (
                <Popover content={(groupItem.exTraCondition.tooltipInfo)}>
                  <Icon type="info-circle-o" className='font-description' />
                </Popover>
              )}</span>}
            >
              {this.renderDefaultText(groupItem.exTraCondition.options, groupItem.exTraCondition.fpCode)}
            </FormItem>
          }
        </div>
      })}
    </Form>
  }

  render() {

    let { configFp, isShowLoading } = this.state;
    return (
    <div className="new-workflow-config">
      <Spin spinning={isShowLoading}>
        <Alert message={messages('request-1.key722')/*配置了规则时，按照规则执行，否则按照默认规则执行。*/} type="info" showIcon/>
        {
          configFp.map(config => {
            return !!config.groupList.filter(item => !item.isHide).length ? (
              <div className="config-wrap">
                {config.moduleName && <h3 className="module-name">
                  {config.moduleName}
                </h3>}
                { this.renderConfigFp(config)}
              </div>
            ) : <div />
          })
        }
      </Spin>
    </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    tenant: state.login.tenant,
    tenantMode: state.main.tenantMode,
  }
}
const wrappedNewFpConfig = Form.create()(NewFpConfig);
export default connect(mapStateToProps)(wrappedNewFpConfig);
